<template>
  <div>
    <el-container>
      <el-header>分享代码</el-header>
      <el-main>
        <el-card class="box-card">
          <div class="card-title">
            <div>
              <span>标&nbsp;&nbsp;&nbsp;&nbsp;题：&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-input placeholder="请输入内容" v-model="article.title" clearable style="width: 70%;"></el-input>
            </div>
            <br>
            <br>
            <div>
              <span>归&nbsp;&nbsp;&nbsp;&nbsp;类：&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <template>
                <el-select v-model="article.sortId" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.code"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </div>
            <br>
            <br>
            <div>
              <span>作&nbsp;&nbsp;&nbsp;&nbsp;者：&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-input placeholder="请输入内容" v-model="article.author" clearable style="width: 70%;"></el-input>
            </div>
            <br>
            <br>
            <div>
              <span>联系方式：&nbsp;</span>
              <el-input placeholder="请输入内容" v-model="article.tel" clearable style="width: 70%;"></el-input>
            </div>
            <br>
            <br>
            <div>
              <span>摘&nbsp;&nbsp;&nbsp;&nbsp;要：&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="article.detail"
                resize="none"
                style="width: 70%;"
              ></el-input>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div>
              <template>
                <div>
                  <mavon-editor v-model="article.editorial"/>
                </div>
              </template>
            </div>
            <br>
            <br>
            <div style="float: right;">
              <el-button type="warning" @click="$router.go(-1)">取消</el-button>
              <el-button type="primary" @click="save()">提交</el-button>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {
        //数据对象
        title: "", //标题
        sortId: "", //分类
        author: "", //作者
        tel: "", //联系方式
        detail: "", //梗概
        editorial: "", //详情
        dr: 0, //是否删除
        isEnable: 0, //是否启用
        isTool: 0 //是否为工具
      },
      options: [], //文章转载，分类的枚举值
      // optionvalue: "", //文章转载，分类的默认值
      messageType: "", //这是消息的类型
      messageValue: "", //这是消息的值

      ret: []
    };
  },
  methods: {
    message() {
      //消息弹窗
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },
    getupDate() {
      //得到前端传来的值
      this.article = JSON.parse(this.$route.query.data);
      if (this.article.isEnable == true) {
        this.article.isEnable = 1;
      } else if (this.article.isEnable == false) {
        this.article.isEnable = 0;
      }
    },
    //获得文章分类
    getSort() {
      this.$axios
        .get("/sort/getSort")
        .then(successResponse => {
          this.options = successResponse.data;
        })
        .catch(failResponse => {}); //失败后的操作
    },
    save() {
      this.messageType = "error"; //先设置成错误，后面的判断就不用设置了，axios里面会根据返回值再给massagetype赋值
      if (this.article.title == "") {
        this.messageValue = "文章标题不能为空";
        this.message();
        return;
      }
      if (this.article.sortId == "") {
        this.messageValue = "文章分类不能为空";
        this.message();
        return;
      }
      if (this.article.author == "") {
        this.messageValue = "文章作者不能为空";
        this.message();
        return;
      }
      if (this.article.tel == "") {
        this.messageValue = "联系方式不能为空";
        this.message();
        return;
      }
      if (this.article.detail == "") {
        this.messageValue = "简介不能为空";
        this.message();
        return;
      }
      if (this.article.editorial == "") {
        this.messageValue = "文章内容不能为空";
        this.message();
        return;
      }
      // 开始保存数据
      this.$axios({
        method: "post",
        url: "/article/saveArticle",
        data: JSON.stringify(this.article)
      }).then(successResponse => {
        if (successResponse.data.message == "success") {
          this.messageType = "success";
          this.messageValue = "修改成功";
          this.message();
          this.$router.go(-1);
        } else {
          this.messageType = "error";
          this.messageValue = "修改失败";
          this.message();
        }
      });
    }
  },
  created() {
    this.getSort();
    //得到前一个页面传来的文章数据
    this.getupDate();
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  text-align: left;
  margin-left: 25%;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.box-card {
  width: 60%;
  /* text-align: center; */
}
</style>
